page-roster-detail {
    $active-color: #3dab4a;

    @function computed-vw($px) {
        @return $px/1080*100vw;
    }

    .toolbar-ios {
        .back {
            width: 7vw;
            height: 8vw;
            display: block;
            background-size: cover;
            background-image: url(../assets/images/client/client-filter/icon_return.png);
            background-repeat: no-repeat;
        }
        .menu {
            width: 6.5vw;
            height: 5.5vw;
            display: block;
            background-size: cover;
            background-image: url(../assets/images/client/client-filter/icon_menu.png);
            background-repeat: no-repeat;
        }
        ion-title {
            height: 100%;
            padding: 0 computed-vw(150);
        }
        .toolbar-title-ios {
            .nav-btn {
                height: 100%;
                color: #fff;
                background-color: transparent;
                font-size: 5vw;
                padding: 0;
                text-align: center;
                &_active {
                    color: rgb(255, 202, 55);
                }
                &:first-child {
                    margin-right: computed-vw(110);
                }
            }
        }
    }
    .collspan-content {
        &:first-child{
            padding-top: computed-vw(320);
        }
    }
    .scroll-content {
        background-color: #f5f5f5;
        .activity-wrapper {
            margin-top: computed-vw(280);
        }
    }
    .fix-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        padding: computed-vw(60);
        width: 100%;
        .phone-wrapper{
            width: computed-vw(72);
            height: computed-vw(72);
            border-radius: computed-vw(36);
            background-color: #35AC63;
            position: relative;
        }
        .fix-bar_right{
            display: flex;
            align-items: center;
        }
        .fix-name {
            font-size: computed-vw(54);
        }
        .active-name {
            color: $active-color;
        }
        .fix-tel {
            color: #221e1f;
            font-size: computed-vw(42);
        }
        .fix-add {
            display: inline-block;
            width: computed-vw(72);
            height: computed-vw(72);
            background-image: url("../assets/images/activity/roster-list/add.png");
            background-size: 100% 100%;
            margin-right: computed-vw(30);
        }
        .fix-phone {
            position: absolute;
            width: computed-vw(46);
            height: computed-vw(46);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-image: url("../assets/images/activity/roster-list/phone.png");
            background-size: 100% 100%;
        }
    }
}
